<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="骡窝窝商城" http-equiv="keywords">
    <meta name="description" content="骡窝窝商城">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <title>骡窝窝商城</title>

    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/zy.css" type="text/css">
    <link rel="stylesheet" href="css/swiper.min.css" type="text/css">
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        $(function () {
            $("#order").click(function () {
                var productInfoArr = [];
                for(var i = 0; i < productInfo.length; i++){
                    var str = "id:"+productInfo[i].product.id+";count:"+productInfo[i].count+";specsId:"+productInfo[i].specs.id;
                    productInfoArr.push(str);
                }
                //获取留言
                var message = $(".message").val();
                //获取总价
                var totalPrice = $(".tPrice").html();
                //封装数据
                var productOrder = {
                    "user.id": uid,
                    add: $(".p").html(),
                    payWay: $(".no").data("va"),
                    message: message,
                    totalPrices: totalPrice,
                    freight: 0,
                    productInfo: productInfoArr
                };

                //保存数据到订单表
                $.post("/productOrders", productOrder, function (data) {
                    console.log(data);
                    var Cid = data.id;
                    //保存成功删除购物车中数据
                    if (data.id != null) {
                        $.ajax({
                            type: "DELETE",
                            url: "/shoppingcarts/" + cid,
                            success: function (data) {
                                console.log(data);
                                //操作成功跳转页面
                                window.location.href = "paymentPage.html?id=" + Cid
                            },
                            error: function (e) {
                                console.log(e);
                            }
                        });
                    }
                });
            });

            var productInfo;
            jQuery.ajaxSettings.traditional = true;
            //获取url上的参数
            var params = getParams();
            var cids = params.cids;
            //商品总价
            var tPrice = 0;
            //url上获得的参数是字符串,需要先切割.再转变成数组
            var ids = cids.split(",");
            var cid = [];
            for (var i = 0; i < ids.length; i++) {
                var id = Number(ids[i]);
                cid.push(id);
            }
            //获取客户勾选的商品id,进行查询
            $.get("/shoppingcarts/" + cid, function (data) {
                productInfo = data.list;
                var temp;
                $(".product").renderValues(data, {
                    getImgUrl: function (item, value) {
                        if (value) {
                            temp = value[0];
                            $(item).attr("src", temp);
                        }
                    }
                });

                //商品总价.总数量
                var sl = 0;
                var tprice = 0;

                //循环遍历标签并循环设置赋值
                $.each($("em[id='count']"), function (item, ele) {
                    //查找自定义标签
                    var a = $(this).data("flag");
                    var price = $("em[data-flag='" + a + "']").html();
                    //转换成数字
                    var prices = Number(price);
                    //单个商品数量
                    var num = data.list[item].count;
                    sl += num;
                    //单个商品总价
                    tprice = tprice + num * prices;
                    $(ele).html("x " + data.list[item].count);
                });

                //商品总数量
                $("#num").html("x " + sl);

                //商品总价
                $(".tPrice").html(tprice)
            });
            var uid = params.id;
            //跳转收货地址
            $("#adds").click(function () {
                var url = $(this).data("url");
                parent.location.href = url + uid + "&" + "cids=" + cid;
            });

            //获取返回的json对象
            if (sessionStorage.getItem("add")) {
                var add = JSON.parse(sessionStorage.getItem("add"));
                $("#addName").html(add.name);
                $(".p").html(add.address);
            }


        });

    </script>


</head>
<body>
<!--页面内容
<div id="yemnr">-->
<!--头部-->
<div class="toub_beij toub_beij_zy">
    <div class="zhongj_k zhongj_k_z">
        <div class="jiu_feo">
            <div class="logo_k logo_k_fanh"><a href="javascript:history.go(-1);"><img class="fanh_ann"
                                                                                      src="images/web/fanh.png"></a>
            </div>
            <div class="zhongjain_daoh">
                <ul>
                    <li><a class="zyyge">确认订单</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //滑动头部透明（针对首页头部用）
    window.onscroll = function () {

        var autoheight = document.body.scrollTop || document.documentElement.scrollTop;
        if (autoheight > 10) {
            $(".toub_beij").css("position", "fixed")
        } else {
            $(".toub_beij").css("position", "relative")
        }
    }
</script>
<!--内容-->
<div class="jie_diz">
    <a id="adds" data-url="productAdd.html?id=">
        <p id="addName">潘中全 182*****710</p>
        <p class="p">贵州贵阳市云岩区城区下合群路达亨大厦1606 </p><i></i>
    </a>
</div>
<div class="caix"></div>
<div class="gouwuc_kk gouwuc_kk_jies">
    <ul>
        <li>
            <div class="product">
                <div render-loop="list">
                    <div class="diannao_shanp">
                        <a href="商品页面.html"><h1><img render-key="list.product.imgArr" render-fun="getImgUrl"></h1></a>
                        <div class="you">
                            <a href="商品页面.html"><p class="px24 bt" render-html="list.product.title"></p></a>
                            <p class="xh" render-html="list.specs.name"></p>
                            <div class="youjfy">
                                <div class="goum_sl">
                                    <div class="px26 jiaq"><p>￥<em data-flag="a" class="price"
                                                                   render-html="list.product.price"></em>.00
                                    </p></div>
                                    <div class="counter_box">
                                        <em data-flag="a"
                                            id="count"></em><span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="peis_xz">
    <div class="kuaid"><a href="#"><p>配送方式</p><span>骡窝窝官方快递<i></i></span></a></div>
    <div class="kuaid"><a href="#"><p>发票信息</p><span>电子发票明细<i></i></span></a></div>
</div>
<div class="zhifu_fangs">
    <h1>支付方式</h1>
    <ul id="oul">
        <li class="no" data-va="1">在线支付</li>
        <li data-va="2">货到付款</li>
    </ul>
</div>
<div class="gei_shangj_ly">
    <h1>给商家留言：</h1>
    <input type="text" class="message" placeholder="请您留言">
</div>
<div class="jies_qian">
    <div class="shangpjis">
        <h1>商品总计</h1>
        <p>
            <em id="num"></em>
            ¥<span class="tPrice"></span>.00
        </p>
    </div>
    <div class="shangpjis">
        <h1>运费</h1>
        <p>
            <span>¥00.00</span>
        </p>
    </div>

</div>


<!--底部导航-->
<!---->
<div class="dib_daoh_b">
    <div class="gouwuc_ gouwuc_yem jiesy">
        <div class="zhong"><p>总计：¥<em class="tPrice"></em>.00</p></div>
        <div class="you">
            <div class="goum">
                <a id="order">提交订单</a>
            </div>
        </div>
    </div>
</div>
<!--大框div
</div>-->
<!--搜索页面-->
</body>
</html>

<script type="text/javascript">
    window.onload = function () {
        var oUl = document.getElementById('oul');
        var oXunHuan = oUl.getElementsByTagName('li')
        for (var i = 0; i < oXunHuan.length; i++) {
            oXunHuan[i].onclick = function () {
                for (var i = 0; i < oXunHuan.length; i++) {
                    oXunHuan[i].className = '';
                }
                this.className = 'no';
            }
        }
    };

</script> 